<!DOCTYPE html>
<html>
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>签到</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style>
        .el-header ,.el-footer{
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }

        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: left;
            line-height: 160px;
            height: 450px;
            /*background: url("../img/photo1.png");*/
        }
        .el-button{
            text-align: center;
        }
    </style>
</head>
<body>

<div id="app">
    <el-container>
        <el-header>每日打卡</el-header>
        <el-main>
            <div style="line-height: 50px">应打卡天数:{{shouldSign}}
                <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage.shouldSign"></el-progress>
            </div>
            <div style="line-height: 50px">已打卡天数:{{hasSign}}
                <el-progress :text-inside="true" :stroke-width="26" :percentage="percentage.hasSign"></el-progress>
            </div>
            <div style="line-height: 50px">是否全勤:<span>{{hasCom}}</span>
            </div><el-progress type="circle" :percentage="100" :status="status" ref="hasCom"></el-progress>
        </el-main>
        <e-footer>    <el-row>
            <el-button style="margin-left: 550px;" :type="bType" @click="signin()" :disabled="disabled">{{signBut}}</el-button>
        </el-row>
        </e-footer>
    </el-container>
    <hr>
</div>
<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    let date = new Date();
    var totalDay=new Date(date.getFullYear(),date.getMonth()+1,0).getDate();//获得当月总天数
    new Vue({
        el:"#app",
        data:{
            shouldSign: 2,
            hasSign: 2,
            hasCom: '是',
            percentage: {
                shouldSign: 100,
                hasSign: 100,
            },
            disabled:true,
            bType: 'warning',
            status: 'success',
            signBut: '点击打卡'
        },
        created:function (){
            axios.get("/user/qSignData").then((res=>{
                this.shouldSign=date.getDate();
                this.percentage.shouldSign=((this.shouldSign/totalDay)*100).toFixed(2);
                this.hasSign=res.data.data.days;
                this.percentage.hasSign=((this.hasSign/totalDay)*100).toFixed(2);
                if(res.data.data.flag){
                    this.disabled=true;
                    this.bType='success';
                    this.signBut="已打卡";
                }
                if(this.hasSign<this.shouldSign){
                    this.status="exception";
                }else {
                    this.status="success";
                }
            }));
        },
        methods:{
            signin(){
                // this.$refs['signin'].
                axios.get("/user/sign").then((res=>{
                      if(res.data.flag){
                          this.hasSign=this.hasSign+1;
                          this.percentage.hasSign=(this.hasSign/totalDay)*100;
                          if(this.hasSign<this.shouldSign){
                              this.status="exception";
                          }else {
                              this.status="success";
                          }
                          this.disabled=true;
                          this.bType='success';
                          this.signBut="已打卡";
                          this.$message.success(res.data.message);
                      }else {
                          this.$message.error(res.data.message);
                      }
                }));
            }
        }
    })
</script>
</body>
</html>